<template>
  <div class="page-score-growth-config ">
    <el-tabs>
      <el-tab-pane :label="$t('user.pointsEarnSetting')">
        <Score ref="basicRef" />
      </el-tab-pane>
      <el-tab-pane :label="$t('user.growthEarnSetting')">
        <Growth ref="explainRef" />
      </el-tab-pane>
      <el-tab-pane :label="$t('user.otherConfiguration')">
        <Expire ref="expireRef" />
        <Question ref="questionRef" />
        <Level ref="levelRef" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import Score from './components/score-config.vue'
import Growth from './components/growth-config.vue'
import Expire from './components/score-expire-config.vue'
import Question from './components/score-question-config.vue'
import Level from './components/level-show-config.vue'

</script>
<style lang="scss" scoped>
/*
通用样式
*/
.page-score-growth-config {
 :deep(.tips)  {
    color: #9797a1;
    font-size: 12px;
  }
 :deep(.title)  {
    font-size: 16px;
    font-weight: 700;
    display: inline-block;
    vertical-align: middle;
    padding-right: 20px;
  }
  :deep(.gray-box)  {
    background: #f2f2f6;
    padding: 20px 35px;
    height: 100%;
  }
  :deep(.border-bottom-gray)  {
    border-bottom: 1px solid #dddce2;
  }

  :deep(.top-redius)  {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }

  :deep(.set-form)  {
    margin: 20px;
  }

  /**
    elenemt
    **/
 :deep(.el-checkbox__label)  ,
 :deep(.el-radio__label)  {
    padding-left: 5px;
    font-size: 13px;
  }
  :deep(.el-radio__input.is-checked) {
    .el-radio__inner {
      border-color: #155bd4;
    }
  }
 :deep(.el-checkbox__inner) ,
  :deep(.el-radio__inner)  {
    border: 1px solid #dcdfe6;;
  }
  :deep(.el-checkbox__inner::after) {
    left: 3px;
    top: 0;
  }

  :deep(.el-input__inner) {
  }
}
</style>
